<template>
  <Auth
    :authority="['ROLE_ADMIN', 'ROLE_INLAY']"
    :access="$store.state.sys.user.access"
  >
    <Card :padding="0">
      <Table :loading="loading" :columns="columns" :data="data">
        <template #name="{ row }">
          <Avatar icon="ios-person" :src="row.avatar" class="ivu-mr-8" />
          <strong>{{ row.name }}</strong>
        </template>
        <template #masterImage="{ row }">
          <div class="audit-image-box" style="padding: 20px 0">
            <Image
              id="auditImage"
              @click.stop="toViewImage(row)"
              lazy
              :src="row.masterImage"
              width="80px"
              height="80px"
            />
          </div>
        </template>
        <template #translateImage="{ row }">
          <div class="audit-image-box">
            <img
              id="translateImage"
              @click="toPickView(row)"
              class="audit-image"
              :src="row.translateImage"
            />
          </div>
        </template>
        <template #action="{ row }">
          <a @click="downs(row)">原图下载</a>
          <!-- <a :href="row.masterImage" download target="_blank">原图下载</a> -->
          <Divider type="vertical"></Divider>
          <a @click="openUploadModal(row)">上传译图</a>
          <Divider type="vertical"></Divider>
          <a @click="openInlayText(row)">查看译文</a>
        </template>
      </Table>

      <div class="ivu-mt ivu-mb ivu-text-center">
        <Page
          :total="allInlayNum"
          show-total
          show-elevator
          @on-change="pageChange"
          @on-prev="pageChange"
          @on-next="pageChange"
        />
      </div>

      <Drawer
        title="上传译图"
        :closable="true"
        v-model="uploadModal"
        width="400"
      >
        <div class="ivu-mb-8">标题： {{ uploadModalData.title }}</div>
        <Upload
          type="drag"
          paste
          :format="['jpg', 'jpeg', 'png']"
          :on-success="handleSuccess"
          :on-format-error="handleFormatError"
          :before-upload="handleUpload"
          @default-file-list="defaultList"
          action="https://bhmanhua.top/server/api/manage/uploadInlayImage.php"
        >
          <div style="padding: 20px 0">
            <Icon
              type="ios-cloud-upload"
              size="52"
              style="color: #3399ff"
            ></Icon>
            <p>点击选择文件上传</p>
          </div>
        </Upload>
        <div v-if="file != ''">{{ file.name }}</div>
        <Progress v-if="file != ''" :percent="fileProgress" />
        <div class="ivu-mt-8">
          <Button @click="upload">上传</Button>
          <Button @click="file = ''" class="ivu-ml-8" type="error"
            >清空文件</Button
          >
        </div>
      </Drawer>
      <!-- 查看大图 -->
      <Drawer title="查看大图" :closable="true" v-model="viewModal" width="35%">
        <img :src="viewModalData.masterImage" />
      </Drawer>
      <!-- 查看译文 -->
      <Drawer
        :title="`查看${vInlayTextDrawerData.title}的译文`"
        :closable="true"
        v-model="viewInlayTextDrawer"
        width="70%"
      >
        <Row>
          <Col span="12">
            <img style="width: 100%" :src="vInlayTextDrawerData.orderImage" />
          </Col>
          <Col span="12">
            <List>
              <ListItem
                v-for="(item, index) in vInlayTextDrawerData.orderList"
                :key="index"
              >
                <ListItemMeta :description="item.translation">
                  <template #title>
                    <div class="title">
                      <span class="ivu-mr-8 order">{{ item.orderNum }}</span>
                      <span>{{ item.original }}</span>
                    </div>
                  </template>
                </ListItemMeta>
                <template #action>
                  <li>
                    <a @click="handleCopy(item.translation)">复制</a>
                  </li>
                </template>
              </ListItem>
            </List>
          </Col>
        </Row>
      </Drawer>
    </Card>

    <template #noMatch>
      <Alert type="error">权限不足</Alert>
    </template>
  </Auth>
</template>

<script>
import { upload, get, post } from "@/utils/http";
export default {
  name: "InlayView",
  data() {
    return {
      userAccess: "",
      currentPage: 1,
      loading: false,
      allInlayNum: 0,
      fileProgress: 0,
      uploadModal: false,
      viewModal: false,
      viewInlayTextDrawer: false,
      vInlayTextDrawerData: {
        orderList: "",
        translateImage: "",
      },
      defaultList: "",
      uploadModalData: "",
      viewModalData: "",
      file: "",
      columns: [
        {
          title: "编号",
          key: "pid",
          width: 80,
        },
        {
          title: "用户名",
          slot: "name",
          width: 300,
        },

        {
          title: "原图",
          slot: "masterImage",
          width: 100,
        },
        {
          title: "标题",
          key: "title",
          width: "auto",
        },
        {
          title: "上传时间",
          key: "time",
          width: 200,
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
      data: [],
    };
  },
  mounted() {
    this.getInlayData();
  },

  methods: {
    handleUpload(file) {
      this.file = file;
      return false;
    },

    async upload() {
      let fileFormData = new FormData();
      fileFormData.append("file", this.file);
      fileFormData.append("uid", this.$store.state.sys.user.userId);

      for (const key in this.uploadModalData) {
        const element = this.uploadModalData[key];
        fileFormData.append(key, element);
      }
      clearInterval(timer);
      let timer;
      timer = setInterval(() => {
        if (this.fileProgress < 100) {
          this.fileProgress += 4;
        }
      }, 100);
      const res = await upload("uploadInlayImage.php", fileFormData);
      if (res) {
        this.fileProgress = 100;
        this.getInlayData();
        this.$Notice.success({
          title: res.status,
        });
      }
    },
    // 复制按钮
    handleCopy(item) {
      this.$Copy({
        text: item,
        showTip: false,
        success: () => {
          this.$Notice.success({
            title: "复制译文成功",
          });
        },
      });
    },
    async openInlayText(row) {
      this.viewInlayTextDrawer = true;
      this.vInlayTextDrawerData.title = row.title;
      const res = await get(`getInlayText.php?pid=${row.pid}`);
      if (res) {
        this.vInlayTextDrawerData.orderList = res.orderList;
        this.vInlayTextDrawerData.orderImage = res.orderImage;
      }
    },
    toPickView(row) {
      this.viewModal = true;
      this.viewModalData = row;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件类型错误",
        desc: "文件 " + file.name + " 类型错误, 请上传 jpg or png.",
      });
    },
    handleSuccess(res, file) {
      this.$Notice.success({
        title: res.status,
      });
      this.getInlayData();
    },
    openUploadModal(row) {
      this.uploadModal = true;
      this.uploadModalData = row;
    },
    pageChange(page) {
      this.currentPage = page;
      this.getInlayData();
    },
    async getInlayData() {
      const res = await get(`getInlayData.php?page=${this.currentPage}`);
      if (res) {
        this.data = res.inlayList;
        this.allInlayNum = res.allInlayNum;
      }
    },
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      let link = document.createElement("a");
      fetch(imgsrc)
        .then((res) => res.blob())
        .then((blob) => {
          // 将链接地址字符内容转变成blob地址
          link.href = URL.createObjectURL(blob);
          console.log(link.href);
          link.download = name;
          document.body.appendChild(link);
          link.click();
        });
    },
    downs(row) {
      this.downloadIamge(row.masterImage, `${row.title}-原图`);
    },
  },
};
</script>

<style>
.order {
  background-color: red;
  color: white;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
}
</style>
